<template>
    <div class="page flexbox">
        <div class="login-box">
            <div class="login-header">
                <router-link to="/index/register" class="pull-right">注册</router-link>
                <a href="javascript:;" class="icons close" @click="back">关闭</a>
            </div>
            <div class="logo flexbox items-center justify-center">
                <img src="../../assets/images/logo.png" />
            </div>
            <div class="login-form">
                <div class="form-group">
                    <span class="icons mobile"></span>
                    <input type="number" class="form-control" v-model="phone" placeholder="请输入手机号码">
                </div>
                <div class="form-group">
                    <span class="icons code"></span>
                    <input type="number" class="form-control" v-model="code" placeholder="请输入验证码">
                    <input type="button" value="获取验证码" id="sendCode" @click="getCode" />
                </div>
                <div class="form-bottom">
                    <div class="login-btn">
                        <a href="javascript:;" class="btn" :class="[isOk ? 'btn-active' : '']" @click="login">登录</a>
                    </div>
                    <div class="quick-nav">
                        <router-link to="/index/login" class="pull-right">账号登录</router-link>
                        <router-link to="/">忘记密码</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixin from '@/mixin'
export default {
    data() {
        return {
            phone: '',
            code: ''
        }
    },
    mixins: [
        mixin
    ],
    computed: {
        isOk() {
            return (this.phone.length == 0 || this.code.length == 0) ? false : true;
        }
    },
    methods: {
        login() {
            if (0 === this.phone.length) {
                this.$Toast('请输入手机号码');
                return false;
            }
            if (0 === this.code.length) {
                this.$Toast('请输入验证码');
                return false;
            }
            if (this.phone.length != 0 && this.code.length != 0) {

            }
        },
        getCode() {
            if (0 === this.phone.length) {
                this.$Toast('请输入手机号码');
                return false;
            }
        }
    }
}
</script>
<style src="@/assets/scss/login.scss" lang="scss"></style>
